<template>
  <div class="user">
    <div class="top">
      <el-button type="primary"
                 @click="linkAdd">+ 新增</el-button>
      <div class="search">
        <el-input placeholder="请输入用户名"
                  v-model="search"
                  class="input">
          <el-button slot="append"
                     icon="el-icon-search"
                     @click="userSearch"></el-button>
        </el-input>
      </div>
    </div>
    <!-- 表单 -->
    <div class="table">
      <el-table :data="tableData"
                style="width: 100%"
                :border="true">
        <el-table-column type="index"
                         width="100"
                         label="序号"
                         align="center"></el-table-column>
        <!-- <el-table-column prop="userId" label="ID" align="center" v-if="0"></el-table-column> -->
        <el-table-column prop="username"
                         label="用户名"
                         width="100"
                         align="center"></el-table-column>
        <el-table-column prop="email"
                         label="邮箱"
                         width="180"
                         align="center"></el-table-column>
        <el-table-column prop="status"
                         label="状态"
                         width="50"
                         align="center"></el-table-column>
        <el-table-column prop="avatar"
                         label="头像"
                         width="300"
                         align="center">
          <template slot-scope="scope">
            <img :src="scope.row.avatar"
                 alt
                 width="50px" />
          </template>
        </el-table-column>
        <el-table-column prop="createTime"
                         label="创建时间"
                         width="200"
                         align="center"></el-table-column>
        <el-table-column label="操作"
                         align="center">
          <template slot-scope="scope">
            <el-button size="mini"
                       @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <el-button size="mini"
                       type="danger"
                       @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <div class="page"
           v-if="pageStatus">
        <el-pagination background
                       layout="total, sizes, prev, pager, next, jumper"
                       @size-change="handleSizeChange"
                       @current-change="handleCurrentChange"
                       :current-page="currentPage"
                       :page-sizes="[5, 10, 50, 100]"
                       :page-size="pageSize"
                       :total="total"></el-pagination>
      </div>
      <!-- 编辑弹框 -->
      <el-dialog title="编辑用户"
                 :visible.sync="dialogVisible"
                 width="30%"
                 :before-close="handleClose"
                 align="center">
        <div class="form">
          <el-form :model="addObj"
                   :rules="rules"
                   ref="ruleForm"
                   label-width="100px"
                   class="demo-ruleForm">
            <el-form-item label="用户名"
                          prop="username">
              <el-input v-model="addObj.username"></el-input>
            </el-form-item>
            <el-form-item label="邮箱"
                          prop="email">
              <el-input v-model="addObj.email"></el-input>
            </el-form-item>
            <el-form-item>
              <span>状态：</span>
              <el-radio v-model="addObj.status"
                        :label="1">正常</el-radio>
              <el-radio v-model="addObj.status"
                        :label="0">禁用</el-radio>
            </el-form-item>
          </el-form>
        </div>
        <span slot="footer"
              class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary"
                     @click="sureEdit">确 定</el-button>
        </span>
      </el-dialog>
      <!-- 删除弹框 -->
      <el-dialog title="提示"
                 :visible.sync="deleteVisible"
                 width="30%"
                 :before-close="handleClose">
        <span>确认要删除数据吗?</span>
        <span slot="footer"
              class="dialog-footer">
          <el-button @click="deleteVisible = false">取 消</el-button>
          <el-button type="primary"
                     @click="sureDelete">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import { getAllUser, userEdit, userDelete, userSearch } from "@/api";
export default {
  data () {
    return {
      search: "",
      currentPage: 1,
      pageSize: 5,
      total: 50,
      tableData: [],
      dialogVisible: false,
      deleteVisible: false,
      userId: "",
      pageStatus: true,
      addObj: {
        username: "",
        email: "",
        status: 1,
        userId: ""
      },
      radio: "",
      rules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          {
            min: 3,
            max: 8,
            message: "长度在 3 到 8 个字符",
            trigger: ["blur"]
          }
        ],
        email: [
          { required: true, message: "请输入邮箱地址", trigger: "blur" },
          {
            type: "email",
            message: "请输入正确的邮箱地址",
            trigger: ["blur", "change"]
          }
        ]
      }
    };
  },
  methods: {
    handleEdit (index, row) {
      // console.log(index, row, 1234567890);
      this.addObj.userId = row.userId;
      this.addObj.username = row.username;
      this.addObj.email = row.email;
      this.addObj.status = row.status;
      this.dialogVisible = true;
    },
    handleDelete (index, row) {
      // console.log(index, row);
      this.deleteVisible = true;
      this.userId = row.userId;
    },
    handleSizeChange (val) {
      // 修改pageSize
      this.pageSize = val;
      this.users();
    },
    handleCurrentChange (val) {
      // 修改currentPage
      this.currentPage = val;
      this.users();
    },
    handleClose (done) {
      done();
    },
    // 获取表单数据 渲染页面
    users () {
      getAllUser({
        currentPage: this.currentPage,
        pageSize: this.pageSize
      }).then(data => {
        // console.log(data, 12345678);
        if (data.data.code == 200) {
          // console.log(data.data.users);
          this.tableData = data.data.data.users;
          this.total = data.data.data.total;
        }
      });
    },
    // 跳转
    linkAdd () {
      this.$router.push({ name: "adduser" });
    },
    // 编辑
    sureEdit () {
      // console.log(this.addObj);
      this.$refs.ruleForm.validate(vaild => {
        if (vaild) {          userEdit(this.addObj).then(data => {
            console.log(data);
            if (data.code == 200 && data.msg == "编辑成功") {
              this.dialogVisible = false;
              this.users();
            }
          })
          .catch(err => {
            this.$message({
              message: err,
              type: "error"
            });
          });
        }
      });
    },
    // 删除
    sureDelete () {
      userDelete({ userId: this.userId }).then(data => {
        // console.log(data);
        if (data.code == 200 && data.msg == "删除成功") {
          // console.log(data, 123456)
          this.deleteVisible = false;
          this.users();
        }
      });
    },
    //搜索
    userSearch () {
      // console.log(this.search);
      if (this.search) {
        userSearch({ username: this.search }).then(data => {
          console.log(data);
          if (data.data.code == 200 && data.data.msg == "搜索成功") {
            this.tableData = data.data.data;
            this.search = "";
            // this.total = data.data.length;
            this.pageStatus = false;
          }
        });
      } else {
        this.users();
        this.pageStatus = true;
      }
    }
  },
  created () {
    // console.log(this.currentPage, this.pageSize);
    this.users();
  }
};
</script>

<style lang="less" scoped>
.user {
  .top {
    width: 100%;
    height: 50px;
    margin-top: 40px;
    padding: 0 30px;
    box-sizing: border-box;
    .el-button {
      float: left;
    }
    .search {
      float: right;
      .input /deep/ .el-input__inner {
        border: 1px solid #ccc;
        outline: none;
      }
    }
  }
  .table {
    border: 1px solid #ccc;
  }
  .page {
    .el-pagination {
      width: 300px;
      margin-left: 300px;
      margin-top: 50px;
      margin-bottom: 50px;
    }
  }
}
</style>